<template>
	<!-- 我的-实名认证 -->
	<view class="RealNameAuthentication public">
		<view class="main-back">
			<view class="main">
				<view class="main-title">
					实名认证
				</view>
				<view class="main-item">
					<view class="">
						真实姓名
					</view>
					<view class="">
						<input type="text" placeholder="请输入您的姓名" v-model="name" @blur="regularName">
					</view>
				</view>
				<view class="main-item">
					<view class="">
						身份证号码
					</view>
					<view class="">
						<input type="idcard" placeholder="请输入您的身份证" v-model="idcard" maxlength="18" @blur="regularIdcard">
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button>确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				name: '',
				idcard: '',
			}
		},
		methods: {
			// 验证真实姓名
			regularName(){
				let reg = /^[\u4e00-\u9fa5]{2,4}$/
				if (!reg.exec(this.name)) {
				  uni.showToast({
				  	title:'姓名格式不正确',
					icon:'none',
					duration:2000
				  })
				}
			},
			// 验证身份证号码
			regularIdcard(){
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				if (!reg.exec(this.idcard)) {
				  uni.showToast({
				  	title:'身份证格式不正确',
					icon:'none',
					duration:2000
				  })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.RealNameAuthentication {
		background: #F7F7F7;
		.main-back {
			background: white;
		}
		.main {
			width: 640rpx;
			margin: auto;
			.main-title {
				font-size: 52rpx;
				font-weight: 400;
				color: #222222;
				padding: 34rpx 0;
			}
			.main-item {
				display: flex;
				align-items: center;
				height: 94rpx;
				font-size: 30rpx;
				font-weight: 400;
				border-bottom: 1px solid #F8F8F8;
				input {
					width: 450rpx;
				}
				view:first-child {
					width: 200rpx;
					color: #222222;
				}
			}
		}
		.footer-button {
			padding-top: 221rpx;
			button {
				width: 684rpx;
				height: 80rpx;
				background: #F14500;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>